<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>01常用指令</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        常用的内置指令
        v-text:  更新元素的 innerText
        v-html:  更新元素的 innerHTML
        v-if:    条件渲染(动态控制节点是否存在)
        v-else:  条件渲染(动态控制节点是否存在)
        v-show:  条件渲染(动态控制display)
        v-for:   遍历数组/对象
        v-on:    绑定事件监听,可简写成 @
        v-bind:xxx 强制绑定解析表达式 可简写成  :xxx
        v-model:  双向数据绑定
     -->
     <div id="root">
        <!-- <a :href="url">{{title}}</a> -->
        <a :href="url" v-text="title"></a>
        <div v-html="htmlStr">

        </div>
     </div>

     <script>
         new Vue({
            el: '#root',
            data: {
                url: 'https://www.cctalk.com/m/group/336666',
                title: '点我去学习',
                htmlStr: '<h4>欢迎跟银河老师学习日语</h4>'
            }
         })
     </script>
</body>
</html>